<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery鼠标悬停渐变导航</title>
    <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.menu ul li').hover(function (){
                $(this).find('span').stop().fadeIn('slow');
            })
            ,function (){
                $(this).find('span').stop().fadeOut('slow');
            }
        })
    </script>
    <style type="text/css">
        body{font-family:"宋体";margin:0;padding:0;}
        div,ul,li{margin:0px;padding:0px;}
        li{list-style-type:none;}
        /* menu */
        .menu{background:url(images/mebg.jpg) no-repeat;height:47px;overflow:hidden;padding-top:2px;width:1000px;margin:20px auto auto;}
        .menu ul{padding-left:68px;}
        .menu ul li{float:left;height:45px;overflow:hidden;margin-left:-46px;display:inline;position:relative;}
        .menu ul li a{padding:0 50px;height:45px;line-height:44px;position:relative;display:block;float:left;font-size:14px;font-weight:bold;color:#fff;text-decoration:none;}
        .menu ul li span{background:url(images/libg1.gif) 0px no-repeat;height:45px;position:absolute;top:0px;left:0px;width:159px;display:none;}
    </style>
</head>
<body>
<div class="menu">
    <ul>
        <li><span></span><a href="http://sc.chinaz.com">网站首页</a></li>
        <li><span></span><a href="http://sc.chinaz.com">关于我们</a></li>
        <li><span></span><a href="http://sc.chinaz.com">新闻中心</a></li>
        <li><span></span><a href="http://sc.chinaz.com">最新产品</a></li>
        <li><span></span><a href="http://sc.chinaz.com">产品案例</a></li>
        <li><span></span><a href="http://sc.chinaz.com">公司招聘</a></li>
        <li><span></span><a href="http://sc.chinaz.com">在线留言</a></li>
        <li><span></span><a href="http://sc.chinaz.com">联系我们</a></li>
    </ul>
</div>
<div style="text-align: center;clear: both">
    <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p>
    <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>